<template>
	<view class="jingjiren">
		<div class="top">
			<view class="text">
				<view class="t">成为大赛经纪人</view>
				<view class="">享推荐收益</view>
			</view>
			<image class="hongbao" src="@/static/images/jingjiren/663de08088f4df212b1b602e.png" mode=""></image>
		</div>
		<div class="bottom">
			<block v-if="statistics.agent.status == 'none'">
				<view class="title1">申请信息</view>
				<view class="biaodan">
					<view class="bk">
						<view class="box">
							<view class="box-item">
								<view class="laber">
									<text class="x">*</text>
									申请人:
								</view>
								<view class="input-border">
									<view class="input-bg">
										<input
											v-model="user.realname"
											class="input"
											placeholder-style="color: rgba(255, 255, 255, 0.35);"
											placeholder="请填写申请人姓名"
											type="text"
											value=""
										/>
									</view>
								</view>
							</view>
							<view class="box-item">
								<view class="laber">
									<text class="x">*</text>
									手机号:
								</view>
								<view class="input-border">
									<view class="input-bg">
										<input
											v-model="user.mobile"
											class="input"
											placeholder-style="color: rgba(255, 255, 255, 0.35);"
											placeholder="请填写申请人手机号"
											type="text"
											value=""
										/>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn-baoming flex justify-center align-center" @click="go">提交申请</view>
			</block>
			<block v-else>
				<view :class="['icon-box flex justify-center align-center', statistics.agent.status !== 'pending' ? 'cuowu' : '']">
					<view class="icon flex justify-center align-center">
						<text :class="['text ', statistics.agent.status !== 'pending' ? 'wlIcon-shibai' : 'wlIcon-pintuantuangouchenggong']"></text>
					</view>
				</view>
				<view class="title">
					<view class="">{{ statistics.agent.status !== 'pending' ? '未通过审核' : '提交成功！' }}</view>
					<view class="tip" v-if="statistics.agent.status == 'pending'">{{ typeText }}</view>
				</view>
				<view class="tip-box" v-if="statistics.agent.status == 'reject'">
					<view class="">未通过原因</view>
					<view class="tip">请核实您提交的信息</view>
				</view>

				<view class="btn-list">
					<view class="btn-cx flex align-center justify-center" v-if="statistics.agent.status == 'reject'" @click="cxtj">重新填写</view>
					<view class="btn-home">
						<view class="bg flex align-center justify-center" @tap="$wanlshop.back()">返回首页</view>
					</view>
				</view>
			</block>
		</div>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	onLoad() {},
	data() {
		return {
			type: 0,
			user: {
				realname: '',
				mobile: ''
			}
		};
	},
	computed: {
		...mapState(['statistics']),
		typeText() {
			let s;
			switch (this.statistics.agent.status) {
				case 'forbidden':
					s = '被禁用';
					break;
				case 'pending':
					s = '审核中';
					break;
				case 'freeze':
					s = '被冻结';
					break;
				case '拒绝':
					s = '被冻结';
					break;
			}
			return s;
		}
	},
	methods: {
		cxtj() {
			this.$store.commit('statistics/edit', {
				agent: {
					status: 'pending'
				}
			});
		},
		go() {
			uni.request({
				url: `/wanlshop/activity/Index/addAgent`,
				method: 'POST',
				data: this.user,
				success: (res) => {
					this.$store.commit('statistics/edit', {
						agent: {
							status: 'pending'
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.jingjiren {
	min-height: 100vh;
	background-color: $bg1;
	display: flex;
	flex-direction: column;
	.top {
		position: relative;
		z-index: 2;
		width: 750rpx;
		height: 350rpx;
		background: rgba(103, 33, 255, 1);
		display: flex;
		align-items: center;
		.text {
			display: flex;
			flex-direction: column;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 44.8rpx;
			color: rgba(255, 255, 255, 1);
			margin-left: 30rpx;
			.t {
				font-size: 48rpx;
				font-weight: 400;
				margin-bottom: 20rpx;
			}
		}
		.hongbao {
			z-index: -1;
			position: absolute;
			bottom: -20rpx;
			right: 0rpx;
			width: 342rpx;
			height: 296rpx;
		}
	}
	.bottom {
		flex: 1;
		position: relative;
		z-index: 3;
		margin-top: -20rpx;
		background-color: rgba(23, 5, 35, 1);
		border-radius: 20rpx 20rpx 0 0;
		padding: 50rpx 20rpx;
		box-sizing: border-box;
		.title1 {
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0rpx;
			line-height: 44.8rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
		.icon-box {
			margin: 0 auto;
			margin-top: 30rpx;
			width: 202rpx;
			height: 202rpx;
			background: rgba(170, 40, 248, 0.19);
			border-radius: 50%;
			&.cuowu {
				background: rgba(233, 39, 39, 0.3);
				.icon {
					background: rgba(233, 39, 39, 1);
				}
			}
			.icon {
				width: 162rpx;
				height: 162rpx;
				border-radius: 50%;
				background: linear-gradient(270deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
				.text {
					font-size: 60rpx;
					color: #fff;
				}
			}
		}
		.title {
			margin-top: 50rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: 900;
			letter-spacing: 1.8rpx;
			color: rgba(255, 255, 255, 1);
			.tip {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-weight: 500;
				letter-spacing: 1.3rpx;
				line-height: 36.4rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
		.tip-box {
			text-align: center;
			padding: 20rpx;
			margin: 50rpx auto;
			width: 640rpx;
			height: 180rpx;
			background: rgba(23, 5, 35, 1);
			/** 文本1 */
			font-size: 26rpx;
			font-weight: 900;
			letter-spacing: 1.3rpx;
			line-height: 36.4rpx;
			color: rgba(233, 39, 39, 1);

			.tip {
				margin-top: 10rpx;
				font-size: 26rpx;
				font-weight: 500;
				letter-spacing: 1.3rpx;
				line-height: 36.4rpx;
				color: rgba(233, 39, 39, 1);
			}
		}
		.btn-list {
			margin-top: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 1.5rpx;
			line-height: 42rpx;
			.btn-cx {
				margin-bottom: 20rpx;
				width: 520rpx;
				height: 80rpx;
				opacity: 1;
				border-radius: 10rpx;
				background: linear-gradient(90deg, rgba(170, 40, 248, 1) 0%, rgba(104, 65, 250, 1) 100%);
			}
			.btn-home {
				width: 520rpx;
				height: 80rpx;
				border-radius: 10rpx;
				padding: 2rpx;
				background: linear-gradient(90deg, rgba(104, 65, 250, 1) 0%, rgba(170, 40, 248, 1) 100%);
				.bg {
					color: rgba(170, 40, 248, 1);
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
					background: $bg1;
				}
			}
		}
	}
}
.biaodan {
	margin-top: 50rpx;
	.title {
		margin: 0 auto;
		width: 290rpx;
		height: 56rpx;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 1.6rpx;
		color: rgba(255, 255, 255, 1);
	}
	.bk {
		margin: 0 auto 20rpx auto;
		box-sizing: content-box;
		width: 700rpx;
		border-radius: 10rpx;
		padding: 4rpx;
		.box {
			height: 100%;
			width: 100%;
			border-radius: 10rpx;
			padding: 30rpx;
			.box-item {
				padding-bottom: 20rpx;
			}
			.laber {
				/** 文本2 */
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 1.4rpx;
				color: rgba(255, 255, 255, 1);
				text-align: left;
				vertical-align: top;
				.x {
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 1.4rpx;
					color: rgba(223, 39, 233, 1);
				}
			}
			.input-border {
				margin-top: 20rpx;
				width: 640rpx;
				height: 88rpx;
				border-radius: 10rpx;
				padding: 4rpx;
				background: linear-gradient(90deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
				.input-bg {
					position: relative;
					border-radius: 10rpx;
					background-color: $bg1;
					width: 100%;
					height: 100%;
				}
				.input {
					background-color: $bg1;
					flex: 1;
					height: 100%;
					padding: 20rpx;
					padding-right: 88rpx;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 1.4rpx;
					line-height: 39.2rpx;
					color: #fff;
					&.p {
						color: rgba(255, 255, 255, 0.35);
					}
				}
			}
			.input-border-image {
				margin-top: 20rpx;
				margin-right: 30rpx;
				width: 194rpx;
				height: 194rpx;
				border-radius: 10rpx;
				padding: 4rpx;
				background: linear-gradient(90deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
				.input-bg-image {
					position: relative;
					border-radius: 10rpx;
					background-color: rgba(41, 12, 60, 1);
					width: 100%;
					height: 100%;
					.del {
						z-index: 999;
						border-radius: 0rpx 0rpx 10rpx 0rpx;
						position: absolute;
						right: 0;
						top: 0;
						width: 40rpx;
						padding: 5rpx 0;
						text-align: center;
						/** 文本1 */
						font-size: 24rpx;
						font-weight: 500;
						letter-spacing: 1.2rpx;
						color: rgba(255, 255, 255, 1);
						border-radius: 0rpx 0rpx 0rpx 10rpx;
						background: linear-gradient(270deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
					}
					.xj1 {
						height: 100%;
					}
					.xj {
						width: 66rpx;
						height: 66rpx;
					}
				}
			}
		}
	}
	.tip {
		/** 文本1 */
		margin: 20rpx 0;
		font-size: 26rpx;
		font-weight: 500;
		letter-spacing: 1.3rpx;
		color: rgba(100, 89, 107, 1);
	}
}
.btn-baoming {
	font-size: 32rpx;
	font-weight: 900;
	letter-spacing: 1.6rpx;
	color: rgba(255, 255, 255, 1);
	margin: 50rpx auto;
	width: 640rpx;
	height: 100rpx;
	opcity: 1;
	border-radius: 10rpx;
	background: linear-gradient(90deg, rgba(90, 71, 251, 1) 0%, rgba(162, 43, 248, 1) 100%);
}
</style>
